<template>
  <div id="welcome-box">
    <div class="top-box">
      <globle-linear-border class="top-box-aside">
        <hello></hello>
      </globle-linear-border>
      <globle-linear-border class="top-box-main">
        <class-card v-if="userStore.stageList.length !== 0" class="class-card"></class-card>
      </globle-linear-border>
    </div>
    <div class="bottom-box">
      <aside>
        <globle-linear-border class="aside-totalView">
          <total-view v-if="homePageData" :data="homePageData"></total-view>
        </globle-linear-border>
        <globle-linear-border class="aside-workRate">
          <div id="totalWorkRate"></div>
        </globle-linear-border>
      </aside>
      <main>
        <globle-linear-border class="main-perStageWorked">
          <div id="perStageWorked"></div>
        </globle-linear-border>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import echarts from '../../../echarts';
import { useAPI } from '../../../request/api';
import { useThemeStore } from '../../../store/theme';
import { useUserStore } from '../../../store/user';
import { IThemeColor, APIData, IHomePageChartParams, IHomePageChart } from '../../../type';
import { initTotalWorkRate } from './chartsInit/totalWorkRate';
import { initPerStageWorked } from './chartsInit/perStageWorked';
import ClassCard from './components/ClassCard.vue';
import Hello from './components/Hello.vue';
import TotalView from './components/TotalView.vue';
const themeStore = useThemeStore();
const userStore = useUserStore();
const api = useAPI();

const homePageData = ref<IHomePageChart>();

const isCloseMenu = ref<boolean>(themeStore.isColseMenu);
const themeColor = ref<IThemeColor>(themeStore.currentThemeColor);
themeStore.$subscribe((args, states) => {
  if (themeColor.value.font != states.currentThemeColor.font) {
    themeColor.value = states.currentThemeColor;
    disposeAllCharts(); //销毁之前的实例
    initAllCharts(); //重新创建
  }

  if (isCloseMenu.value != states.isColseMenu) {
    isCloseMenu.value = states.isColseMenu;

    setTimeout(() => {
      disposeAllCharts(); //销毁之前的实例
      initAllCharts(); //重新创建
    }, 300);
  }
});

onMounted(async () => {
  await getData();
  initAllCharts();
});

const initAllCharts = () => {
  const data = homePageData.value;
  if (!data) return;
  initTotalWorkRate(echarts, document.querySelector('#totalWorkRate') as HTMLElement, [data.totalWorked, data.totalNoWorked], themeColor.value);
  initPerStageWorked(echarts, document.querySelector('#perStageWorked') as HTMLElement, data.workYAxis, dealPerStageWorkedData(), themeColor.value);
};

const disposeAllCharts = () => {
  echarts.dispose(document.querySelector('#totalWorkRate') as HTMLElement);
  echarts.dispose(document.querySelector('#perStageWorked') as HTMLElement);
};

onBeforeUnmount(() => {
  disposeAllCharts();
});

const dealPerStageWorkedData = () => {
  let labelData = [] as string[];
  const array = JSON.parse(JSON.stringify(userStore.stageList));
  array.reverse();
  for (const item of array) {
    labelData.push(`${item.stage}期${item.department}部`);
  }
  return labelData;
};

const getData = async () => {
  const params: IHomePageChartParams = { workId: userStore.userInfo.workId };
  const res: APIData = await api.getChartData(params, userStore.role, 'homePage');
  if (res.code === 200) homePageData.value = res.data;
  else ElMessage.error(res.message);
};
</script>

<style lang="scss" scoped>
#welcome-box {
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .top-box {
    height: 35%;
    display: flex;
    justify-content: space-between;

    &-aside {
      width: 30%;
      height: 100%;
    }
    &-main {
      width: 69%;
      height: 100%;
    }
  }

  .bottom-box {
    height: 63%;
    display: flex;
    justify-content: space-between;

    aside {
      width: 30%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .aside-totalView {
        height: 45%;
      }
      .aside-workRate {
        height: 53%;
        #totalWorkRate {
          height: 100%;
        }
      }
    }

    main {
      width: 69%;
      height: 100%;
      .main-perStageWorked {
        height: 100%;
        #perStageWorked {
          height: 100%;
        }
      }
    }
  }
}
</style>
